<template>
  <div v-if="list">
    <ul v-if="list.length > 0" class="my-ans">
      <li v-for="qa in list" :key="qa.question.questionId">
        <router-link :to="'/qa/' + qa.question.questionId" >
          <img :src="qa.questionedUser.avatar" class="photo">
          <div class="info">
            <router-link :to="'/qa/' + qa.question.questionId" class="title ftz16">{{qa.question.questionContent}}</router-link>
            <div class="tip">
              <span class="price" v-if="qa.question.payment > 0"><span class="icon-coin"></span>{{parseFloat(qa.question.payment)}}</span>
              <span class="price" v-else>免费</span>
              <span>{{qa.question.createTime | parseTime('{m}-{d} {h}:{i}')}}</span>
              <span>分类：{{qa.question.fieldName}}</span>
              <span>我向<i>{{qa.questionedUser.authName}}</i>提问</span>
            </div>
          </div>
          <button v-if="qa.question.status === '20'" class="fr" :to="'/qa/' + qa.question.questionId">查看回答</button>
          <button v-if="qa.question.status === '10'" class="fr black">等待回答</button>
          <button v-if="qa.question.status === '30'"  class="fr black">已失效</button>
          <button v-if="qa.question.status === '3'"  class="fr black">待审核</button>
        </router-link>
      </li>
    </ul>
    <NoDataTips v-else/>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: ['list', 'categoryTypeIndex'],
  data () {
    return {

    }
  },
  methods: {
    showAnswerQuestionBox (item) {
      this.$emit('showAnswerQuestionBoxFn', item)
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.my-ans li{
    padding: 20px 3%;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
}
.my-ans .photo{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.my-ans .my-ans-1 .info{
    display: inline-block;
    vertical-align: middle;
    width: 680px;
    height: 64px;
    position: relative;
    margin-left: 14px;
}
.my-ans .title{
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    margin-bottom: 16px;
}
.my-ans .info .tips{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #808080;
}
.my-ans .price{
    font-size: 12px;
    color: #e94f4f;
    display: inline-block;
    vertical-align: middle;
    height: 28px;
    line-height: 28px;
    background-color: #fff2e2;
    border-radius: 14px;
    padding: 0 10px;
}
.my-ans .list-1 .price{
    margin-right: 20px;
}
.my-ans .list-1 .ans{
    width: 108px;
    height: 34px;
    border-radius: 17px;
    color: #fff;
    background-color: #e94f4f;
    position: absolute;
    right: 16px;
    top: 42px;
}
.my-ans .list-1 .ans .icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-image: url($icon);
    background-repeat: no-repeat;
    background-position: -243px -15px;
    margin-right: 4px;
}
.my-ans .info i{
    margin-right: 20px;
}
.my-ans .list-2 .photo-img{
    height: 104px;
    width: 64px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.my-ans .list-2 .photo-s{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.my-ans .list-2 .photo-s img{
    width: 100%;
    height: 100%;
}
.my-ans .list-2 .photo-img .icon-mid{
    position: absolute;
    right: 8px;
    top: 50px;
}
.my-ans .list-2 .price{
    display: block;
    text-align: center;
    line-height: 28px;
    margin:10px auto 0 auto;
}
.my-ans .list-2 .icon-mid{
    position: absolute;
    right: 8px;
    top: 50px;
}
.my-ans .list-2 .info{
    display: inline-block;
    vertical-align: top;
    width: 720px;
    height: 96px;
    margin-left: 14px;
    position: relative;
}
.my-ans .list-2 .name{
    color: #00a0e9;
    font-weight: bold;
}
.my-ans .list-2 .txt{
    color: #484848;
    margin-top: 4px;
    height: 44px;
    line-height: 22px;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
